<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../iconfont/iconfont.css">
  <link rel="stylesheet" href="../css/reset.css">
  <link rel="stylesheet" href="../css/header.css">
  <link rel="stylesheet" href="../css/footer.css">
  <link rel="stylesheet" href="../css/mymall.css">
  <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
  <title>首页_服务中心_华为商城</title>
</head>

<body>
  <div class="container">
    <header>
      <div class="ad-product"><a href="#"></a></div>
      <span class="close">×</span>
      <!-- 导航栏 -->
      <nav>
        <div class="nav-group w">
          <div class="nav-bar-l">
            <ul>
              <li><a href="#">首页</a></li>
              <li></li>
              <li><a href="#">华为官网</a></li>
              <li></li>
              <li><a href="#">花粉俱乐部</a></li>
              <li></li>
              <li><a href="#">V码(优购码)</a></li>
              <li></li>
              <li><a href="#">企业购</a></li>
              <li></li>
              <li><a href="#">Select Region</a></li>
              <li></li>
              <li>更多精彩<span></span>
                <ul class="secondary-nav">
                  <li><a href="#">EMUI</a></li>
                  <li><a href="#">应用市场</a></li>
                  <li><a href="#">华为终端云空间</a></li>
                  <li><a href="#">开发者联盟</a></li>
                </ul>
              </li>
            </ul>
          </div>
          <div class="nav-bar-r">
            <ul>
              <li><a href="">请登录</a></li>
              <li></li>
              <li><a href="">注册</a></li>
              <li></li>
              <li><a href="">我的订单</a></li>
              <li></li>
              <li>客户服务<span></span>
                <ul class="secondary-nav">
                  <li><a href="#">客户服务</a></li>
                  <li><a href="#">联系客户</a></li>
                </ul>
              </li>
              <li></li>
              <li>网站导航<span></span>
                <div class="webnav secondary-nav">
                  <div class=""><span class="icon">111</span></div>
                  <div class="">
                    <dl>
                      <dt>频道</dt>
                      <dd><a href="#">华为专区</a></dd>
                      <dd><a href="#">企业购</a></dd>
                    </dl>
                  </div>
                  <div class="">
                    <dl>
                      <dt>产品</dt>
                      <dd><a href="#">华为专区</a></dd>
                      <dd><a href="#">企业购</a></dd>
                      <dd><a href="#">企业购</a></dd>
                      <dd><a href="#">企业购</a></dd>
                    </dl>
                  </div>
                  <div class="">
                    <dl>
                      <dt>增值服务</dt>
                      <dd><a href="#">企业购</a></dd>
                      <dd><a href="#">企业购</a></dd>
                    </dl>
                  </div>
                  <div class="">
                    <dl>
                      <dt>会员</dt>
                      <dd><a href="#">华为专区</a></dd>
                      <dd><a href="#">企业购</a></dd>
                    </dl>
                  </div>
                </div>
              </li>
              <li></li>
              <li>手机版<span></span>
                <div class="downloadApp">
                  <div>1</div>
                  <div>1</div>
                  <div>1</div>
                </div>
              </li>
              <li></li>
              <li><a href="">购物车(0)</a></li>
            </ul>
          </div>
        </div>
      </nav>
    </header>
    <!-- logo区域和商品导航栏 -->
    <div class="w pro-nav">
      <div class="logo">
        <h1>1111</h1>
      </div>
      <div class="prolist">
        <ul>
          <li><a href="#" class="huawei">华为专区</a></li>
          <li><a href="#" class="rongyao">荣耀专区</a></li>
          <li><a href="#">P40系列</a></li>
          <li><a href="#">荣耀30</a></li>
          <li><a href="#">智能家居</a></li>
        </ul>
      </div>
      <div class="search">
        <form action="https://www.baidu.com" method="get">
          <input type="text" placeholder="Mate40系列"><button class="iconfont search-icon icon-search"></button>
        </form>
      </div>
    </div>
    <!-- 面包屑导航 -->
    <div class="content">
      <div class="w">
        <!-- 面包屑导航 -->
        <div class=" crumb">
          <a href="#">首页 </a><span class="iconfont icon-jiantou"></span><a href="#">我的商城</a>
        </div>
        <div class="section">
          <!-- 左侧侧边栏 -->
          <div class="aside-l">
            <h1 class="border-F6"><a href="#">我的商城</a></h1>
            <!-- 我的消息 -->
            <ul class="mymsg border-F6">
              <li>我的消息</li>
              <li><a href="#">消息中心</a></li>
              <li><a href="#">活动推送</a></li>
            </ul>
            <!-- 订单中心 -->
            <ul class="ordercenter border-F6">
              <li>订单中心</li>
              <li><a href="#">我的订单</a></li>
              <li><a href="#">我的退换货</a></li>
              <li><a href="#">我的退款</a></li>
              <li><a href="#">我的回收单</a></li>
              <li><a href="#">商品评价</a></li>
            </ul>
            <!-- 我的资产 -->
            <ul class="assets border-F6">
              <li>我的资产</li>
              <li><a href="#">我的积分</a></li>
              <li><a href="#">我的优惠券</a></li>
              <li><a href="#">我的代金券</a></li>
              <li><a href="#">我的花瓣</a></li>
              <li><a href="#">等级与特权</a></li>
            </ul>
            <!-- 购买支持 -->
            <ul class="support border-F6">
              <li>购买支持</li>
              <li><a href="#">收货地址管理</a></li>
              <li><a href="#">实名认证</a></li>
              <li><a href="#">我的预约</a></li>
              <li><a href="#">到货通知</a></li>
              <li><a href="#">我的优享购</a></li>
            </ul>
            <!-- 隐私设置 -->
            <ul class="privacy border-F6">
              <li><a href="#">隐私设置</a></li>
            </ul>
            <!-- 帮助中心 -->
            <ul class="help">
              <li><a href="#">帮助中心</a></li>
            </ul>
          </div>
          <!-- 右侧主体部分 -->
          <div class="main">
            <!-- 用户信息 -->
            <div class="user-detail">
              <div class="picture"><img src="../images/img_logged_in.png" alt=""></div>
              <!-- 邮箱以及会员权益 -->
              <div class="email">
                <a href="#">744823391@qq.com</a>
                <a href="#" class="grade">
                  <span class="range"><span class="badge"></span></span><em>0</em><em>/</em><em>100</em>
                </a>
                <div class="interests">
                  <a href="#">会员权益</a><a href="#">账号中心</a>
                </div>
              </div>
              <!-- 积分 -->
              <div class="integral">
                <a class="num" href="#">0</a>
                <p>积分</p>
                <a class="look" href="#">去看看</a>
              </div>
              <!-- 优惠券 -->
              <div class="coupon">
                <a class="num" href="#">0</a>
                <p>优惠券</p>
                <a class="look" href="#">去看看</a>
              </div>
              <!-- 代金券 -->
              <div class="vouchers">
                <a class="num" href="#">0</a>
                <p>代金券</p>
                <a class="look" href="#">去看看</a>
              </div>
              <!-- 花瓣 -->
              <div class="petal">
                <a class="num" href="#">0</a>
                <p>花瓣</p>
                <a class="look" href="#">去看看</a>
              </div>
            </div>
            <!-- 我的订单 -->
            <div class="mall-middle">
              <div class="middle">
                <!-- 我的订单 -->
                <div class="my-order">
                  <div class="order-detail"><span>我的订单</span><a href="#">全部订单<span
                        class="iconfont icon-jiantou"></span></a></div>
                  <div class="user-portal border-F6">
                    <ul>
                      <li><span class="icon icon1"></span><a href="#">待付款</a></li>
                      <li><span class="icon icon2"></span><a href="#">待收货</a></li>
                      <li><span class="icon icon3"></span><a href="#">待评价</a></li>
                      <li><span class="icon icon4"></span><a href="#">退换货</a></li>
                      <li><span class="icon icon5"></span><a href="#">小程序</a></li>
                    </ul>
                  </div>
                  <div class="rcent-orders">
                    <div class="no-order"></div>
                    <p>当前无近期订单，前往<a href="#">首页</a>选购吧～</p>
                  </div>
                </div>
                <!-- 最近浏览 -->
                <div class="recent-browsing">
                  <h3 class="border-F6">最近浏览</h3>
                  <ul>
                    <li>
                      <a href="#">
                        <div><img src="../images/428_428_FAD19670648EDFCF959E7322E54A1A758BE0CD66A83455C6mp.png" alt="">
                        </div>
                        <p class="order-title">HUAWEI nova 8 Pro 8GB+128GB 全网通版（亮黑色）</p>
                        <p class="color-D0021B">¥3999.00</p>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div><img src="../images/428_428_FAD19670648EDFCF959E7322E54A1A758BE0CD66A83455C6mp.png" alt="">
                        </div>
                        <p class="order-title">HUAWEI nova 8 Pro 8GB+128GB 全网通版（亮黑色）</p>
                        <p class="color-D0021B">¥3999.00</p>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div><img src="../images/428_428_FAD19670648EDFCF959E7322E54A1A758BE0CD66A83455C6mp.png" alt="">
                        </div>
                        <p class="order-title">HUAWEI nova 8 Pro 8GB+128GB 全网通版（亮黑色）</p>
                        <p class="color-D0021B">¥3999.00</p>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div><img src="../images/428_428_FAD19670648EDFCF959E7322E54A1A758BE0CD66A83455C6mp.png" alt="">
                        </div>
                        <p class="order-title">HUAWEI nova 8 Pro 8GB+128GB 全网通版（亮黑色）</p>
                        <p class="color-D0021B">¥3999.00</p>
                      </a>
                    </li>
                  </ul>
                </div>
                <!-- 为你推荐 -->
                <div class="recommend">
                  <h3>为你推荐</h3>
                  <div><img src="../images/47332367480616323374.jpg" alt=""></div>
                  <div><img src="../images/50870872011617807805.jpg" alt=""></div>
                </div>
              </div>
              <div class="aside-r">
                <!-- 右侧边栏广告 -->
                <div class="ad"><img src="../images/76622510490611522667.jpg" alt=""></div>
                <!-- 我的服务 -->
                <div class="serve">
                  <h1>我的服务</h1>
                  <div class="icon-serve">
                    <a href="#">
                      <span class="icon icon1"><img width="100%" src="../images/EdqwkeSVDX9w3FKPzSK2.png" alt=""></span><p>以旧换新</p>
                    </a>
                    <a href="#">
                      <span class="icon icon2"><img width="100%" src="../images/P1cNbD7mbD6wMLXlk0xj.png" alt=""></span><p>补购保障</p>
                    </a>
                    <a href="#">
                      <span class="icon icon3"><img width="100%" src="../images/RZtjrUWV85tNwaoYsSpm.png" alt=""></span><p>联系客服</p>
                    </a>
                  </div>
                </div>
                <!-- 新人见面礼 -->
                <div class="new-gift"><img src="../images/VUTCWxITsS0jb0wNXhJD.png" alt=""></div>
                <!-- 华为移动生活 -->
                <div class="hwydnewfife">
                  <h3>华为移动生活</h3>
                  <div class="life"><a href="#"><img src="../images/vEp2ksvV2h9hMP3KUrrw.png" alt=""></a></div>
                  <div class="life"><a href="#"><img src="../images/c61UkfLNFMM6XdeYDjLX.png" alt=""></a></div>
                  <div class="life"><a href="#"><img src="../images/dMqovywLqjDjAfUFbqr1.png" alt=""></a></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 页面底部 -->
  <iframe class="footer" src="./footer.html" frameborder="0"></iframe>
</body>

</html>